<template>
  <PageWrapper title="抽屉组件使用示例">
    <Alert message="使用 useDrawer 进行抽屉操作" show-icon />
    <a-button type="primary" class="my-4" @click="openDrawerLoading">
      打开Drawer
    </a-button>

    <Alert message="内外同时控制显示隐藏" show-icon />
    <a-button type="primary" class="my-4" @click="openDrawer2(true)">
      打开Drawer
    </a-button>
    <Alert message="自适应高度/显示footer" show-icon />
    <a-button type="primary" class="my-4" @click="openDrawer3(true)">
      打开Drawer
    </a-button>

    <Alert message="内外数据交互" show-icon />
    <a-button type="primary" class="my-4" @click="send">
      打开Drawer并传递数据
    </a-button>
    <Alert message="详情页模式" show-icon />
    <a-button type="primary" class="my-4" @click="openDrawer5(true)">
      打开详情Drawer
    </a-button>
    <Drawer1 @register="register1" />
    <Drawer2 @register="register2" />
    <Drawer3 @register="register3" />
    <Drawer4 @register="register4" />
    <Drawer5 @register="register5" />
  </PageWrapper>
</template>
<script lang="ts" setup>
import { Alert } from "ant-design-vue";
import { useDrawer } from "@/components/Drawer";
import Drawer1 from "./Drawer1.vue";
import Drawer2 from "./Drawer2.vue";
import Drawer3 from "./Drawer3.vue";
import Drawer4 from "./Drawer4.vue";
import Drawer5 from "./Drawer5.vue";
import { PageWrapper } from "@/components/Page";

const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
const [register2, { openDrawer: openDrawer2 }] = useDrawer();
const [register3, { openDrawer: openDrawer3 }] = useDrawer();
const [register4, { openDrawer: openDrawer4 }] = useDrawer();
const [register5, { openDrawer: openDrawer5 }] = useDrawer();
function send() {
  openDrawer4(true, {
    data: "content",
    info: "Info",
  });
}
function openDrawerLoading() {
  openDrawer1();
  setDrawerProps({ loading: true });
  setTimeout(() => {
    setDrawerProps({ loading: false });
  }, 2000);
}
</script>
